<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>持仓与跟踪指数管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@3.2.15/dist/antd.min.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@3.2.15/dist/antd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.3/dist/axios.min.js"></script>
    <style>
        .container {
            padding: 20px;
        }
        .header {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .title {
            font-size: 20px;
            font-weight: bold;
        }
        .search-bar {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <div class="header">
            <div class="title">持仓与跟踪指数管理</div>
            <a-button type="primary" @click="goToEdit">新增持仓</a-button>
        </div>
        
        <div class="search-bar">
            <a-input
                v-model:value="searchKeyword"
                placeholder="请输入代码或名称进行搜索"
                allow-clear
                style="width: 300px;"
                @keyup.enter="handleSearch"
            >
                <template #addonAfter>
                    <a-button @click="handleSearch">搜索</a-button>
                </template>
            </a-input>
        </div>
        
        <a-table
            :columns="columns"
            :data-source="dataSource"
            :pagination="{ pageSize: 10, showSizeChanger: true }"
            row-key="code"
        >
            <template #operation="{ record }">
                <a-button type="link" @click="editCave(record.id)">编辑</a-button>
                <a-popconfirm title="确定要删除该持仓数据吗？" @confirm="deleteCave(record.code)">
                    <a-button type="link" danger>删除</a-button>
                </a-popconfirm>
            </template>
        </a-table>
    </div>
    
    <script>
        const { createApp, ref, onMounted } = Vue;
        const { message } = antd;
        
        const app = createApp({
            setup() {
                const dataSource = ref([]);
                const searchKeyword = ref('');
                
                const columns = [
                    {
                        title: '持仓代码',
                        dataIndex: 'code',
                        key: 'code',
                        width: 150
                    },
                    {
                        title: '持仓名称',
                        dataIndex: 'name',
                        key: 'name',
                        width: 200
                    },
                    {
                        title: '跟踪指数代码',
                        dataIndex: 'refcode',
                        key: 'refcode',
                        width: 150
                    },
                    {
                        title: '跟踪指数名称',
                        dataIndex: 'refname',
                        key: 'refname',
                        width: 200
                    },
                    {
                        title: '更新时间',
                        dataIndex: 'updateTime',
                        key: 'updateTime',
                        width: 180,
                        customRender: (text) => {
                            if (text) {
                                return new Date(text).toLocaleString('zh-CN');
                            }
                            return '';
                        }
                    },
                    {
                        title: '操作',
                        key: 'operation',
                        width: 120,
                        slots: { customRender: 'operation' }
                    }
                ];
                
                // 加载数据列表
                const loadData = () => {
                    axios.get('/cave/dataList')
                        .then(response => {
                            dataSource.value = response.data || [];
                        })
                        .catch(error => {
                            console.error('加载数据失败:', error);
                            message.error('加载数据失败');
                        });
                };
                
                // 搜索
                const handleSearch = () => {
                    if (searchKeyword.value.trim()) {
                        axios.get('/cave/search', {
                            params: { keyword: searchKeyword.value }
                        })
                        .then(response => {
                            dataSource.value = response.data || [];
                        })
                        .catch(error => {
                            console.error('搜索失败:', error);
                            message.error('搜索失败');
                        });
                    } else {
                        loadData();
                    }
                };
                
                // 跳转到新增页面
                const goToEdit = () => {
                    window.location.href = '/cave/edit';
                };
                
                // 编辑持仓
                const editCave = (id) => {
                    window.location.href = `/cave/edit?id=${id}`;
                };
                
                // 删除持仓
                const deleteCave = (code) => {
                    axios.delete(`/cave/delete/${code}`)
                        .then(response => {
                            if (response.data.success) {
                                message.success('删除成功');
                                loadData();
                            } else {
                                message.error(response.data.message || '删除失败');
                            }
                        })
                        .catch(error => {
                            console.error('删除失败:', error);
                            message.error('删除失败');
                        });
                };
                
                // 初始加载数据
                onMounted(() => {
                    loadData();
                });
                
                return {
                    dataSource,
                    searchKeyword,
                    columns,
                    handleSearch,
                    goToEdit,
                    editCave,
                    deleteCave
                };
            }
        });
        
        app.use(antd);
        app.mount('#app');
    </script>
</body>
</html>